<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta content="telephone=no" name="format-detection" />
	<title>Document</title>
	<script src="lib/zepto.min.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#currLi {
			width: 38px;
			height: 38px;
			border: 2px solid red;
			color: purple;
			border-radius: 3px;
			font-size: 20px;
			line-height: 38px;
			text-align: center;
			position: fixed;
			top: 50%;
			margin-top: -19px;
			left: 50%;
			margin-left: -19px;
			display: none;
		} 
		#rightList { 
			position: fixed;
			top:0;
			right: 5px;
			list-style:none;
		}
		#rightList li {
			width: 15px;
			height: 15px;
			line-height: 15px;
			text-align: center;
			/*border: 1px solid red;*/
			margin-top: 2px;
			overflow: hidden;
		}
		.outer {
			width: 200px;
			height: 200px;
			border: 2px solid red;
			display: table;
			position: relative;
		}
		.mid {

		}

		.inner {
			width: 100px;
			height: 100px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform:translate(-50%,-50%);
			/*margin-top: -50px;*/
			/*margin-left: -50px;*/
			border: 2px solid purple;
		}

	</style>
</head>
<body>
	<div id="currLi"></div>
	<ul id="rightList">
		<li class="a">1</li>
		<li class="b">2</li>
		<li class="c">3</li>
		<li class="d">4</li>
		<li class="e">5</li>
		<li class="f">6</li>
		<li class="g">7</li>
		<li class="h">8</li>
		<li class="i">9</li>
		<li class="j">10</li>
		<li class="k">11</li>
		<li class="l">12</li>
		<li class="m">13</li>
		<li class="n">14</li>
		<li class="o">15</li>
		<li class="p">16</li>
		<li class="q">17</li>
		<li class="r">18</li>
		<li class="s">19</li>
		<li class="t">20</li>
		<li class="u">21</li>
		<li class="v">22</li>
		<li class="w">23</li>
		<li class="x">24</li>
		<li class="y">25</li>
		<li class="z">26</li>
	</ul>
	<div class="outer">
		<!-- <div class="mid"> -->
			<div class="inner"></div>
		<!-- </div> -->
		
	</div>


	<script>
		/*
		 通过滑动距离来对应判断,试验未能通过e.target的方式直接获取手指当前dom元素
		 */
		
		$(document).ready(function() {
			var $lis = $('#rightList li'),
				$target = $('#currLi');
			$lis.on('touchstart',function() {
				$target.show();
				$target.html(this.innerHTML);
			})
			$lis.on('touchmove',function(ev) {
				// console.log(ev.changedTouches[0].pageY);
				var disY = ev.changedTouches[0].pageY,
					liHeight = $lis.height();
				// console.log($lis.offset())
				var nH = $lis.offset().top + liHeight;
				var n = Math.ceil(disY/nH);
				$target.show();
				$target.html(range(1,n,26));				
			});

			$lis.on('touchend',function() {
				$target.hide(2600);
			})

			
			function range(min,curr,max) {
				if(curr<min) {
					return min;
				}else if(curr>max) {
					return max;
				}else {
					return curr;
				}
			}
		})
	</script>
</body>
</html>